import React,{Component}from 'react'
import {Button,Modal,Form,Input} from 'antd';
import { message,Select} from 'antd';
import '../css/bases.css'
import http from '../../api/http'
const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 8 },
  };
class Adminlist extends Component{
    constructor(props){
        super(props);
        this.state = {visible: false,formtitle:'添加一级权限',authlist:[],Level:1,parentId:-1,selectauth:''};
    }
    componentDidMount() {
        this.selectmenu()
    }
    // 默认查询列表信息
    selectmenu(){
        // http.get('authlist','MENU').then(res =>{
        //     if(res.code === 0){
        //         //console.log('权限列表',res.data)
        //         this.setState({authlist:res.data})
        //     }
        // })
    }
    // 添加一级页面
    showModal = () => {this.setState({visible: true,Level:1,parentId:-1,formtitle:'添加一级页面',selectauth:''});};
    // 添加二级页面
    addtwo =(idx) =>{
        this.setState({visible: true,Level:2,parentId:idx,formtitle:'添加一级页面',selectauth:''});
    }
    updataone = (itemone) =>{
        this.setState({visible: true,Level:1,parentId:-2,selectauth:itemone,formtitle:'修该一级页面'})
    }
    //修该二级页面
    updatatwo = (itemtwo) =>{
        this.setState({visible: true,Level:2,parentId:-2,formtitle:'修改二级页面',selectauth:itemtwo});
    }
    // 提交表单内容
    handleOk = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => { 
            var that = this
            if (!err) {
                console.log('表单内容', values);
                if(this.state.parentId === -2){
                    console.log('修该', values);
                    http.put('backstage/menus',values,'MENU').then(res =>{
                        if(res.code === 0){
                            that.setState({visible: false});
                            message.success('修该成功');
                            that.selectmenu()
                        }else{
                            message.error('系统出错'+res.data);
                        }
                    })
                }else{
                    console.log('添加', values);
                    http.post('backstage/menus',values,'MENU').then(res =>{
                        if(res.code === 0){
                            that.setState({visible: false});
                            message.success('新增成功');
                            that.selectmenu()
                        }else{
                            message.error('系统出错'+res.data);
                        }
                    })
                }
            }
        });
    };
    // 关闭弹框
    handleCancel= () =>{this.setState({visible: false});};
    // 删除菜单
    delect(id){
        var that = this;
        http.delete('backstage/menus/'+ id,'MENU').then(res =>{
            //console.log('删除菜单结果',res)
            if(res.code === 0){
                message.success('删除成功', 10);
                that.selectmenu()
            }else{

            }
        })
    }
    render(){
        const { getFieldDecorator } = this.props.form;
        let self = this;
        // 是否渲染
        function WarningBanner(props) {
            if (props.parentId < 0) {
                return null;
            }
            return (
                <Form.Item {...formItemLayout} label="上级id">
                    {getFieldDecorator('parentId',{initialValue:props.parentId})(<Select name='type' style={{ width: 120 }} disabled showArrow={false} />)}
                </Form.Item>
            );
        }
        return(
            <div>
                <div className='flexsb'>权限列表<Button type="primary" onClick={this.showModal}>新增权限</Button></div>
                {/* 弹框 */}
                <div>
                    <Modal title={this.state.formtitle} visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} width={600} cancelText='关闭' okText='提交' destroyOnClose='true'>
                        <Form onSubmit={this.handleOk} className="login-form form bases-form">
                            <Form.Item>
                                {getFieldDecorator('menuName', {initialValue:this.state.selectauth.menuName,rules: [{ required: true, message: '请输入菜单名称'}],})(
                                <Input size='large' placeholder="页面名称"/>,)}
                            </Form.Item>
                            <Form.Item>
                                {getFieldDecorator('menuCode', {initialValue:this.state.selectauth.menuCode,rules: [{ required: true, message: '请输入菜单code'}],})(
                                <Input size='large' placeholder="页面缩音" />,)}
                            </Form.Item>
                            <Form.Item>
                                {getFieldDecorator('url', {initialValue:this.state.selectauth.url,rules: [{ required: true, message: '请输入菜单地址'}],})(
                                <Input size='large' placeholder="页面路径" />,)}
                            </Form.Item>
                            <Form.Item {...formItemLayout} label="页面等级">
                                {getFieldDecorator('menuLevel',{initialValue:this.state.Level})(<Select name='type' style={{ width: 120 }} disabled showArrow={false} />)}
                            </Form.Item>
                            <WarningBanner parentId={this.state.parentId}></WarningBanner>
                            <Form.Item>
                                {getFieldDecorator('sort', {initialValue:this.state.selectauth.sort,rules: [{ required: true, message: '请输入上级id'}],})(
                                <Input size='large' placeholder="排序" />,)}
                            </Form.Item>
                            {this.state.selectauth.id && 
                                <Form.Item className='displaynone'>
                                    {getFieldDecorator('id', {initialValue:this.state.selectauth.id})(
                                    <Input size='large' placeholder="id" />,)}
                                </Form.Item>
                            }
                        </Form>
                    </Modal>
                </div>
                <div className='pdt20'>
                    {this.state.authlist.map(function(item){
                        return(
                            <div key={item.id}>
                                <div className='flexlb'>{item.menuName}
                                    <div className='pd1010'>
                                        <Button className='mgr5' type="primary" size='small' onClick={self.addtwo.bind(self,item.id)}>添加</Button>
                                        <Button className='mgr5' type="primary" size='small' onClick={self.updataone.bind(self,item)}>修改</Button>
                                        <Button className='mgr5' type="link" size='small' onClick={self.delect.bind(self,item.id)}>删除</Button>
                                    </div>
                                </div>
                                <div className='mgl10'>
                                    {item.children.map(function(itemtwo){
                                        return(
                                            <div key={itemtwo.id} className='flexlb'>{itemtwo.menuName} 
                                                <div className='pd510'>
                                                    <Button className='mgr5' type="primary" size='small' onClick={self.updatatwo.bind(self,itemtwo)}>修改</Button>
                                                    <Button className='mgr5' type="link" size='small' onClick={self.delect.bind(self,itemtwo.id)}>删除</Button>
                                                </div>
                                            </div>
                                        )
                                    })}
                                </div>   
                            </div>
                        )
                    })}
                </div>
            </div>


            
        )
    }
}
const LoginForm = Form.create({ name: 'normal_auth' })(Adminlist);
export default LoginForm